feat: support scrollWidth for horizontal scrolling - #65
Conversation
Forward `scrollWidth` to the underlying virtual list so a horizontal
scrollbar shows up, and widen both row kinds to the content width.
The sticky group header is portalled into the holder, outside the inner
container that virtual-list shifts by `-offsetX`, so it has to mirror
that shift itself or it stays pinned while rows scroll underneath it.
Mirrored from the opposite edge in rtl.
`scrollWidth` is virtual-only: native scrolling derives the content
width from the rendered rows, so non-virtual lists need no hint and are
left untouched.
Row width is derived from our own prop rather than the render function's
third argument, which is `{ width: undefined }` when unset and would
clobber a user-supplied `styles.item.width`.
|
@aojunhao123 is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars. ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #65 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 10 10
Lines 216 222 +6
Branches 56 61 +5
=========================================
+ Hits 216 222 +6 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Setting `left`/`right` alongside `width` on the fixed header made no difference to its position in either direction: an absolutely positioned box given left, right and width is over-constrained, so the trailing offset is already dropped per direction. Measured in Chrome, ltr and rtl land identically with and without them. Drops the assertions that mirrored those two lines as well.
There was a problem hiding this comment.
Pull request overview
Adds horizontal scrolling support to virtual lists through scrollWidth.
Changes:
- Forwards content width and applies it to virtual rows.
- Synchronizes sticky headers with horizontal offsets.
- Adds tests, documentation, and an interactive demo.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/List.tsx |
Adds the public scrollWidth prop. |
src/VirtualList/index.tsx |
Forwards width and widens virtual rows. |
src/VirtualList/useStickyGroupHeader.tsx |
Tracks horizontal scrolling in sticky headers. |
tests/listy.test.tsx |
Tests scrollbar and row widths. |
tests/hooks.test.tsx |
Tests sticky-header offsets. |
README.md |
Documents the new prop. |
README.zh-CN.md |
Adds translated prop documentation. |
docs/examples/horizontal.tsx |
Adds an interactive horizontal-scrolling example. |
docs/demos/horizontal.md |
Registers the new demo. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
scrollWidth is only read by VirtualList; List.tsx routes to RawList whenever virtual is false, so the prop cannot switch virtual back on.
No description provided.